<extend name="Base/common"/>

<block name="style">
<link rel="stylesheet" type="text/css" href="__PUBLIC__/Home/css/slideshow.css">
<!-- <link rel="stylesheet" href="__PUBLIC__/Home/css/bootstrap.min.css"> -->
<style>
    .item ul li img{
        float: left;
        margin-right:5px;
        padding-bottom: 5px;
    }

</style>
</block>

<block name="body">

    <!-- 轮播广告大图 -->
  <div id="banner_tabs" class="flexslider">
    <ul class="slides">
      <!-- 轮播图开始遍历 -->
      <foreach name="list" item="val">
      <li>
        <a title="" target="_blank" href="#">
          <img width="1920" height="830" alt="{$val.alt}" style="background: url(__PUBLIC__/Home/images/slideshow/{$val.path}) no-repeat center;" src="__PUBLIC__/Home/images/slideshow/alpha.png">
        </a>
      </li>
      </foreach>
      <!-- 轮播图遍历 -->
    </ul>
    <!-- 翻页按钮 -->
    <ul class="flex-direction-nav">
      <li><a class="flex-prev" href="javascript:;"></a></li>
      <li><a class="flex-next" href="javascript:;"></a></li>
    </ul>
  </div>

<!-- 热销商品轮播图 ,后期查找商品销售数据，制成二维数组，进行遍历即可-->
    <div class="productBox">
        <!-- 轮播大图 -->
        <div class="sildeShowBox">
            <div style="height:500px" attr="待删的"></div>
            <!-- <div class="slide-pic"></div> -->
        </div>
        <div class="normalShowBox">
            <div class="col-first">
                <a href="#"><img src="/first_project/Document/images/468-262-__8.jpg"/></a>
                <a href="#" class="s1">状态不下线</a>
                <a href="#" class="s2">探索男子秋季夹克系列</a>
            </div>
            <div class="col-last">
                <a href="#"><img src="/first_project/Document/images/468-262-Z.N-COCO.jpg"/></a>
                <a href="#" class="s1">女子Z.N.E.</a>
                <a href="#" class="s2">探索 女子Z.N.E.系列</a>
            </div>
            <div class="col-first">
                <a href="#"><img src="/first_project/Document/images/468-262_30.jpg"/></a>
                <a href="#" class="s1">随经典而跑</a>
                <a href="#" class="s2">探索Best Seller</a>
            </div>
            <div class="col-last">
                <a href="#"><img src="/first_project/Document/images/468-262.png"/></a>
                <a href="#" class="s1">个性化定制</a>
                <a href="#" class="s2">探索miadidas系列</a>
            </div>
            <div class="cb"></div>
        </div>

        <div class="hotSlideShowBox carousel slide" id="myCarousel">
          <!-- <h3>最受欢迎的产品</h3> -->
            
          <div class="hotProduShow carousel-inner">
            <div class="item active">
              <div class="pro-box">
                <a href="#" class="pro-img"><img src="/first_project/Common/goodsimage/m_418a0c40976bcbd535f1f1413784b667.jpg"/></a>
                <a href="#" class="pro-link"></a>
                <span class="price">&yen;</span>
              </div>
              <div class="pro-box">
                <a href="#" class="pro-img"><img src="/first_project/Common/goodsimage/m_418a0c40976bcbd535f1f1413784b667.jpg"/></a>
                <a href="#" class="pro-link"></a>
                <span class="price">&yen;</span>
              </div>
              <div class="pro-box">
                <a href="#" class="pro-img"><img src="/first_project/Common/goodsimage/m_418a0c40976bcbd535f1f1413784b667.jpg"/></a>
                <a href="#" class="pro-link"></a>
                <span class="price">&yen;</span>
              </div>
              <div class="pro-box">
                <a href="#" class="pro-img"><img src="/first_project/Common/goodsimage/m_418a0c40976bcbd535f1f1413784b667.jpg"/></a>
                <a href="#" class="pro-link"></a>
                <span class="price">&yen;</span>
              </div>
            </div>

            <div class="item">
              <div class="pro-box">
                <a href="#" class="pro-img"><img src="/first_project/Common/goodsimage/m_418a0c40976bcbd535f1f1413784b667.jpg"/></a>
                <a href="#" class="pro-link"></a>
                <span class="price">&yen;</span>
              </div>
              <div class="pro-box">
                <a href="#" class="pro-img"><img src="/first_project/Common/goodsimage/m_418a0c40976bcbd535f1f1413784b667.jpg"/></a>
                <a href="#" class="pro-link"></a>
                <span class="price">&yen;</span>
              </div>
              <div class="pro-box">
                <a href="#" class="pro-img"><img src="/first_project/Common/goodsimage/m_418a0c40976bcbd535f1f1413784b667.jpg"/></a>
                <a href="#" class="pro-link"></a>
                <span class="price">&yen;</span>
              </div>
              <div class="pro-box">
                <a href="#" class="pro-img"><img src="/first_project/Common/goodsimage/m_418a0c40976bcbd535f1f1413784b667.jpg"/></a>
                <a href="#" class="pro-link"></a>
                <span class="price">&yen;</span>
              </div>
            </div>
            <!-- 轮播（Carousel）指标 -->
            <!-- <ol class="carousel-indicators">
                <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                <li data-target="#myCarousel" data-slide-to="1"></li>
                <li data-target="#myCarousel" data-slide-to="2"></li>
            </ol> -->
            <!-- 左、右滑动 -->
            <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
            <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
            <!-- 左、右滑动 -->
          </div>
        </div>
    </div>
<!-- 热销商品轮播图 -->
    
</block>

<block name="script">
    <script type="text/javascript" src="__PUBLIC__/Home/js/slideshow/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="__PUBLIC__/Home/js/slideshow/jquery-1.7.min.js"></script>
    <script type="text/javascript" src="__PUBLIC__/Home/js/slideshow/slider.js"></script>
    <script type="text/javascript">
    $(function() {
      var bannerSlider = new Slider($('#banner_tabs'), {
        time: 5000,
        delay: 400,
        event: 'hover',
        auto: true,
        mode: 'fade',
        controller: $('#bannerCtrl'),
        activeControllerCls: 'active'
      });
      $('#banner_tabs .flex-prev').click(function() {
        bannerSlider.prev()
      });
      $('#banner_tabs .flex-next').click(function() {
        bannerSlider.next()
      });
    })
    </script>

    <script src="__PUBLIC__/Home/js/slideshow/jquery-1.10.2.min.js"></script>
    <script src="__PUBLIC__/Home/js/slideshow/bootstrap.min.js"></script>

    <script>
        console.log($('.active').css('margin-top'));
    </script>
</block>

